<template>
    <div>
        <div class="common-layout" v-if="!isLogin">
            <el-container>
                <el-header  style="font-size: 40px;background-color: #0086f6;color:white">机票预定系统</el-header><br>
                <el-container>
                    <el-aside width="180px" style="background-color: #0086f6;height: 870px;">
                        <el-scrollbar>
                            <el-menu style="background-color: #0086f6;">  <br>
                                <el-menu-item index="1" style="font-size:30px">
                                    <el-button type="primary" :class="{'active': isCondition||isSelect||isSelect1}" @click="f1(route.query.account)">购买机票</el-button>
                                </el-menu-item><br>
                                <el-menu-item index="2" style="font-size:30px">
                                    <el-button type="primary" :class="{'active': isMessage}" @click="f2(route.query.account)">乘车人</el-button>
                                </el-menu-item> <br> 
                                <el-menu-item index="3" style="font-size:30px">
                                    <el-button type="primary" :class="{'active': isMyorder}" @click="f3(route.query.account)">我的订单</el-button>
                                </el-menu-item>  
                            </el-menu> 
                        </el-scrollbar>
                    </el-aside>
                    <el-main>
                        <RouterView></RouterView>
                    </el-main>
                </el-container>
            </el-container>
        </div>
        <div v-if="isLogin">
            <RouterView></RouterView>
        </div>
    </div>
</template>
<!-- rgb(61, 115, 232) -->
<script lang="ts" setup>  
import {ref} from 'vue';
import {watch,computed} from 'vue';
import { RouterView } from 'vue-router';
import { useRouter } from 'vue-router';
import {useRoute} from 'vue-router';
const router = useRouter();
const route=useRoute();
//数据
const isLogin = computed(() => route.path === '/login');
const isCondition = computed(() => route.path === '/condition');
const isMessage = computed(() => route.path === '/message');
const isMyorder = computed(() => route.path === '/myorder');  
const isSelect = computed(() => route.path === '/select');  
const isSelect1 = computed(() => route.path === '/select1');  

//方法
function f1(account){
    // console.log(account)
    router.push({
        name:'condition',
        query:{
            account:account
        }
    });
}
function f2(account){
    // console.log(account)
    router.push({
        name:'message',
        query:{
            account:account
        }
    });
}
function f3(account){
    // console.log(account)
    router.push({
        name:'myorder',
        query:{
            account:account
        }
    });
}
// watch(() => route.path,  (newPath) => {
//     console.log(`Navigated to: ${newPath}`);  
// });
</script>

<style>
.el-button {  
  padding: 20px 25px !important; /* 调整上下左右的内边距 */  
  font-size: 25px !important; /* 调整字体大小 */  
  color: white !important; /* 自定义字体色 */  
  border: none !important; /* 移除按钮边框 */  
  background-color: transparent !important; /* 可选：设置背景为透明 */
} 
.el-button.active {  
  padding: 20px 25px !important; /* 调整上下左右的内边距 */  
  font-size: 25px !important; /* 调整字体大小 */  
  color: black !important; /* 自定义字体色 */  
  border: none !important; /* 移除按钮边框 */  
  background-color: transparent !important; /* 可选：设置背景为透明 */
} 
</style>